<template>
	<view class="signa">
		<view class="box">
			<view class="bottomBtn">
				<view class="bottomBtn-clear" @click="clear">清除</view>
				<view class="bottomBtn-save" @click="save">提交</view>
			</view>
			<canvas class="canvas" disable-scroll="true" :style="{'width':width+'px','height':height+'px'}"
				canvas-id="designature" id="designature" @touchstart="starts" @touchmove="moves"
				@touchend="end"></canvas>
			<canvas class="canvasImg" :style="{'width':height+'px','height':width+'px'}" canvas-id="designature2"
				id="designature2"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultUrl: '',
				cxt: null,
				cxt2: null,
				line: [],
				width: 0,
				height: 0,
				radius: 0,
				isSign: false, //判断是否已经签字
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.width = res.windowWidth - 70;
					this.height = res.windowHeight;
				}
			});
			this.cxt = uni.createCanvasContext('designature', this);
			this.cxt2 = uni.createCanvasContext('designature2', this);
		},
		methods: {
			cancel() {
				uni.navigateBack()
			},
			end(e) {

			},
			distance(a, b) {
				let x = b.x - a.x;
				let y = b.y - a.y;
				return Math.sqrt(x * x + y * y);
			},
			starts(e) {
				this.line.push({
					points: [{
						time: new Date().getTime(),
						x: e.touches[0].x,
						y: e.touches[0].y,
						dis: 0
					}]
				})
				let currentPoint = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.currentPoint = currentPoint
				this.drawer(this.line[this.line.length - 1])
			},
			moves(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.lastPoint = this.currentPoint
				this.currentPoint = point
				this.line[this.line.length - 1].points.push({
					time: new Date().getTime(),
					x: e.touches[0].x,
					y: e.touches[0].y,
					dis: this.distance(this.currentPoint, this.lastPoint)
				})
				this.drawer(this.line[this.line.length - 1])
			},
			drawer(item) {
				this.isSign = true
				let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
					x, y;
				var time = 0;
				if (item.points.length > 2) {
					let lines = item.points[item.points.length - 3];
					let line = item.points[item.points.length - 2];
					let end = item.points[item.points.length - 1];
					x = line.x;
					y = line.y;
					x1 = lines.x;
					y1 = lines.y;
					x2 = end.x;
					y2 = end.y;
					var dis = 0;
					time = (line.time - lines.time) + (end.time - line.time)
					dis = line.dis + lines.dis + end.dis;
					var cxt = this.cxt;
					var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
					cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
					cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
					cxt.setLineCap('round')
					cxt.beginPath();
					cxt.setStrokeStyle('black')
					cxt.setLineWidth(5)
					cxt.moveTo(x1, y1);
					cxt.quadraticCurveTo(cx, cy, x2, y2);
					cxt.stroke();
					cxt.draw(true)
				}
			},
			clear() {
				this.cxt.clearRect(0, 0, 1000, 1000)
				this.cxt.draw()
				this.isSign = false
			},
			save() {
				var that = this;
				if (!this.isSign) {
					uni.showToast({
						title: '请先签字再保存',
						icon: 'none'
					})
					return
				}
				uni.canvasToTempFilePath({
					canvasId: 'designature',
					fileType: 'png',
					quality: 1, //图片质量
					success: function(res) {
						// that.$emit('getImg',res.tempFilePath)
						// 旋转角度
						console.log(res)
						that.rotate(res.tempFilePath);
					},
					fail(e) {
						console.log(e)
					}
				}, this)
			},
			//旋转图片
			rotate(tempFilePath) {
				const that = this
				let width = this.height
				let height = this.width
				var ctx = this.cxt2
				ctx.translate(width / 2, height / 2)
				ctx.rotate((270 * Math.PI) / 180)
				ctx.drawImage(tempFilePath, -height / 2, -width / 2, height, width)
				ctx.draw(false, (data) => {
					// 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
					uni.canvasToTempFilePath({
						width: width,
						height: height,
						canvasId: 'designature2',
						fileType: 'png',
						quality: 1, //图片质量
						success(res2) {
							that.$emit('getImg', res2.tempFilePath);
						}
					}, that)
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.signa {
		position: relative;
		overflow: hidden;
		background-color: #fff;
		// height: 100vh;
		width: 100vw;

		// padding: 20px 16px 30px;
		.box {
			display: flex;
			background-color: #fff;
			border-radius: 20rpx;
			// padding: 12px 12px 100px;
			box-shadow: 0 6rpx 42rpx rgba(0, 0, 0, 0.05);
		}

		.canvas {
			background: #F5F6FA;
			position: relative;
			z-index: 9999;
		}
		.bottomBox {
			flex-direction: column;
			justify-content: center;
			width: 100px;
			height: 80vw;
			padding: 10px;
			// background-color: #007AFF;
			position: fixed;
			left: 50%;
			bottom: -40vw;
			transform: rotate(90deg);
			margin-left: -50px;
			margin-bottom: 72px;

			.tip {
				font-size: 11px;
				color: #FF6F77;
			}

			.btn {
				width: 100%;
				height: 37px;
				background: #F5F5F5;
				border-radius: 19px;
				margin-top: 7px;
				text-align: center;
				line-height: 37px;
				color: #333333;
				font-size: 13px;

				&.blue {
					background: #284CF4;
					color: #fff;
				}
			}
		}
	}

	.canvasImg {
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.bottomBtn {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-bottom: 168rpx;

		&-save {
			transform: rotate(90deg);
			display: inline-block;
			white-space: nowrap;
			// width: 176rpx;
			// height: 84rpx;
			background: #0DB9D1;
			border-radius: 60rpx;
			text-align: center;
			// line-height: 84rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 28rpx 60rpx;
			margin-top: 48px;
		}

		&-clear {
			transform: rotate(90deg);
			display: inline-block;
			white-space: nowrap;
			font-weight: 500;
			font-size: 28rpx;
			padding: 28rpx 60rpx;
			color: #787C88;
		}
	}
</style>